<!DOCTYPE HTML>

<script>
    $(function () {
        
        $("select[name=barang]").change(function(){
                $.ajax({
                    url : "<?php base_url(); ?>index.php?c=c_report_barang&m=detail",
                    data : { barang_id : $(this).val()},
                    type : "post",
                    dataType : "json"
                }).done(function(response){
                    console.log(response);
                    categories = response[1];
                    yaxis = [];
                    series = [];
                    data = response[0];
//                    for (tgl in data){
                        
//                    }
                    colors = ["#6CD3F5","#8F6CF5","#F56CD3","#F58F6C","#D3F56C","#6CF58F"];
                    i=0;
//                    all_values = [];
//                    for ( tgl in data ){
//                        values = [];
//                        for ( jobname in data[tgl] ){
//                            value = data[tgl][jobname]; 
//                            values.push(value);
//                        }
//                        all_values.push(values);
//                    }
                    
                     for ( jobdet_name in data[categories[0]] ){
                        yaxis.push({ // Primary yAxis
                            labels: {
                                formatter: function() {
                                    return this.value +'°C';
                                },
                                style: {
                                    color: colors[i]
                                }
                            },
                            title: {
                                text: jobdet_name,
                                style: {
                                    color: colors[i]
                                }
                            },
                            opposite: true
                
                        });

                        values = [];
                        for ( tgl in data ){
                             value = data[tgl][jobdet_name]; 
                             values.push(value);
                        }
                        series.push({
                            yAxis: i,
                            name: jobdet_name,
                            color: colors[i],
                            type: 'spline',
                            data: values,
                            tooltip: {
                                valuePrefix: 'Rp. '
                            }
                        });
                         
                        i++;
                     }   
                    console.log(yaxis);
                   new Highcharts.Chart({
                    chart: {
                    renderTo: 'grafik',
                        zoomType: 'xy'
                    },
                    title: {
                        text: 'Grafik Harga Barang'
                    },
                    subtitle: {
                        text: 'PT. PP'
                    },
                    xAxis: [{
                        categories: response[1]
                    }],
                    yAxis: yaxis,
                    tooltip: {
                        shared: true
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'left',
                        x: 120,
                        verticalAlign: 'top',
                        y: 80,
                        floating: true,
                        backgroundColor: '#FFFFFF'
                    },
                    series: series
                });
            });
        });

        $("select[name=barang]").change();
            
    });
    
</script>
Nama Barang : <select name="barang"><?php
    foreach($data as $k => $value){
        
 echo "<option value=$k>".$label[$k]->jobdet_name."</option>";
        
    }
?>
</select></p>
<div id='grafik'></div>